<template>
  <div id="contact">
    <section>
      <div class="weui-cells weui-cells_access" style="margin-top: -1px;">
        <router-link to="/contact/new-friends" class="weui-cell">
          <div class="weui-cell__hd">
            <img src="../../assets/images/contact_top-friend-notify.png" class="img-obj-cover"  >
          </div>
          <div class="weui-cell__bd  weui-cell_primary">
            <p>新的朋友</p>
          </div>
        </router-link>
        <router-link to="/contact/group-list" class="weui-cell">
          <div class="weui-cell__hd">
            <img src="../../assets/images/contact_top-addgroup.png" class="img-obj-cover">
          </div>
          <div class="weui-cell__bd weui-cell_primary">
            <p>群聊</p>
          </div>
        </router-link>
        <router-link  to="/contact/tags" class="weui-cell">
          <div class="weui-cell__hd">
            <img src="../../assets/images/contact_top-tag.png" class="img-obj-cover">
          </div>
          <div class="weui-cell__bd weui-cell_primary">
              <p>公众号</p>
          </div>
        </router-link>
        <router-link  to="/contact/tags" class="weui-cell">
          <div class="weui-cell__hd">
            <img src="../../assets/images/contact_top-tag.png" class="img-obj-cover">
          </div>
          <div class="weui-cell__bd weui-cell_primary">
            <p>标签</p>
          </div>
        </router-link>
      </div>
      <!--联系人-->
      <template v-for="(value,key) in contactsList">
        <!--首字母-->
        <div class="weui-cells__title">{{key}}</div>
        <div class="weui-cells">
          <router-link :key="item.wxid" :to="{path:'/contact/details',query:{wxid:item.wxid}}" class="weui-cell weui-cell_access" v-for="item in value"
                       tag="div">
            <div class="weui-cell__hd">
              <img :src="item.headerUrl" class="home__mini-avatar___1nSrW">
            </div>
            <div class="weui-cell__bd">
              {{item.remark?item.remark:item.nickname}}
            </div>
          </router-link>
        </div>
      </template>
    </section>
  </div>
</template>
<script>
  export default{
    mixins:[window.mixin],
    data(){
      return{
        "pageName": "通讯录"
      }
    },
    computed:{
      contactsInitialList(){
        return this.$store.getters.contactsInitialList
      },
      contactsList(){
        return this.$store.getters.contactsList
      }
    },
    mounted() {
      // mutations.js中有介绍
      this.$store.commit("toggleTipsStatus", -1)
    },
    activated() {
      this.$store.commit("toggleTipsStatus", -1)
    },
    mounted() {

    }
  }
</script>
<style>
@import '../../assets/css/contact.css'
</style>
